<template>
  <div class="footer-section">
    <h3>{{ title }}</h3>
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'FooterSection',
  props: {
    title: {
      type: String,
      required: true
    }
  }
}
</script>

<style scoped>
.footer-section h3 {
  font-size: 1.4rem;
  margin-bottom: 20px;
  color: var(--accent-color);
}

.footer-section p, .footer-section li {
  margin-bottom: 10px;
}

.footer-section ul {
  list-style: none;
}

.footer-section a {
  color: #ddd;
  text-decoration: none;
  transition: color 0.3s;
}

.footer-section a:hover {
  color: var(--accent-color);
}
</style>